<template>
  <div id="detail">
    <!-- {{ $store.state.cartList }} -->
    <detail-nav-vue
      class="detailnav"
      @clicknav="clicknav"
      ref="nav"
    ></detail-nav-vue>
    <swiper :banners="banners" class="detailswiper"></swiper>
    <detail-base :goods="goods"></detail-base>
    <detail-shop :shop="shop"></detail-shop>
    <detailgoods :detailInfo="detailinfo"></detailgoods>
    <detailcomment :commentInfo="detailcomment" ref="comment"></detailcomment>
    <goods-list :goodList="recommend" ref="recommend"></goods-list>
    <detailbottom @addcart="addcart"></detailbottom>
  </div>
</template>

<script>
import detailNavVue from "./childcops/detailNav.vue";
import { getdetail, Goods, Shop, getrecommend } from "network/detail.js";
import detailBase from "./childcops/detailBase.vue";
import Swiper from "./swiper/swiper.vue";
import detailShop from "./childcops/detailShop.vue";
import detailgoods from "./childcops/detailgoods.vue";
import detailcomment from "./childcops/detailcomment.vue";
import Scroll from "../../components/common/scroll/Scroll.vue";
import GoodsList from "../home/childcops/GoodsList.vue";
import GoodsListItem from "../home/childcops/GoodsListItem.vue";
import detailbottom from "./childcops/detailbottom.vue";
export default {
  name: "detail",
  data() {
    return {
      iid: null,
      banners: [],
      goods: {},
      shop: {},
      detailinfo: {},
      detailcomment: {},
      recommend: [],
      themeTopY: [],
    };
  },
  components: {
    detailNavVue,
    Swiper,
    detailBase,
    detailShop,
    detailcomment,
    Scroll,
    detailgoods,
    GoodsList,
    GoodsListItem,
    detailbottom,
  },
  created() {
    this.iid = this.$route.params.iid;
    console.log(this.iid);
    getdetail(this.iid).then((res) => {
      // console.log(res);
      this.banners = res.data.result.itemInfo.topImages;
      const data = res.data.result;
      this.goods = new Goods(
        data.itemInfo,
        data.columns,
        data.shopInfo.services
      );
      this.shop = new Shop(data.shopInfo);
      this.detailinfo = data.detailInfo;
      if (data.rate.cRate !== 0) this.detailcomment = data.rate.list[0];
      this.$nextTick(() => {
        this.themeTopY = [];
        this.themeTopY.push(0);
        this.themeTopY.push(this.$refs.comment.$el.offsetTop);
        this.themeTopY.push(this.$refs.recommend.$el.offsetTop);
        console.log(this.themeTopY);
      });
    });
    getrecommend().then((res) => {
      console.log(res);
      this.recommend = res.data.data.list;
    });
  },
  methods: {
    // 内容滚动
    contentscroll(position) {
      console.log(position);
      const positionY = -position.y;
      this.themeTopY.push(Number.MAX_VALUE);
      let length = this.themeTopY.length;
      for (let i = 0; i < length - 1; i++) {
        if (
          positionY >= this.themeTopY[i] &&
          positionY < this.themeTopY[i + 1]
        ) {
          this.$refs.nav.currentindex = i;
        }
      }
    },
    // 点击上方切换栏
    clicknav(index) {
      console.log(index);
      this.$refs.scroll.scrollTo(0, -this.themeTopY[index], 300);
      this.$refs.scroll.refresh();
    },
    addcart() {
      const product = {};
      product.image = this.banners[0];
      product.title = this.goods.title;
      product.desc = this.goods.desc;
      product.price = this.goods.realPrice;
      product.iid = this.iid;
      product.checked = true;
      this.$store.dispatch("addCart", product).then((res) => {
        this.$toast.show(res, 2000);
        // console.log(res);
        
      });
    },
  },
};
</script>
<style scoped>
#detail {
  position: relative;
  z-index: 10;
  background-color: #fff;
  padding-top: 44px;
  height: 100vh;
  /* height: 100%; */
}
.detailnav {
  /* background-color: #fff !important; */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}
.detailcontent {
  height: 100px;
}
</style>
